<template>
  <div>
    <div class="tit">请完善个人信息(预报名)</div>
    <div class="form" >

      <div @click="cityPicker" class="info jt" id="showCity" type="text">选择省市区</div>
      <input id="countyInfo" ref="county" style="display: none" class="info jt" type="text" />

      <div @click="gradePicker" class="info jt" id="showGrade" type="text">选择年级</div>
      <input id="gradeInfo" ref="grade" class="info jt" type="text" style="display: none" />

      <input type="text" v-model="school" class="info"  placeholder="输入学校名称" />
     <!-- <input v-model="school" class="info " type="text" placeholder="输入学校名称" @change="getSchoolList">-->

      <!--<select id="select" class="info " v-model="school" >
        <option value="">请选择学校</option>
        <option :value=item v-for="item in schoolNameList">{{item}}</option>
      </select>-->


      <!--<div @click="schoolPicker" class="info jt" id="showSchool" type="text">选择学校</div>
      <input id="schoolInfo" ref="school" style="display: none" class="info jt" type="text">-->

      <!--<p class="tip">完善信息后请点击下面的开始答题按钮即可参与答题</p>
      <input class="submit"  value="开始答题" name="submit" @click="begin">-->
      <p class="submit"   name="submit" @click="savePreInfo">提交信息</p>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  //import "../../../static/plugin/city-picker.min"
  import { Indicator,Toast  } from 'mint-ui'
  import api from '../../api/http.js'
  import url from '../../api/urlConst.js'
  import { config } from '../../common/js/weChat/service.js'

  export default {
    components: {},
    data () {
      return {
        areaCode: '',
        gradeTag: 0,
        school:"",
        county:"",
        schoolNameList: [],
        searchParams: {
          areaCode: '',
          gradeTag: 0,
          school: ''
        }
      }
    },
    created () {
      setTimeout(() => {
        this.cityPicker()
        this.gradePicker()
      }, 300)
    },
    methods: {
      savePreInfo(){
        if (this.areaCode === null || this.areaCode === '') {
          swal('请选择省市区！')
          return
        }
        if(!this.$refs.grade.value){
          swal('请选择年级！')
          return
        }
        if (this.school === null || this.school === '') {
          swal('请输入学校信息！')
          return
        }

        let parameter = {
          areaCode: this.areaCode,
          grade: parseInt(this.$refs.grade.value),
          school: this.school,
          county:this.county
        }
        console.log('parameter', parameter)
        Indicator.open()
        api.post(url.questions.school.savePreInfo, parameter).then((res) => {
          setTimeout(()=>{Indicator.close()},300)
          if (res.success) {
           //跳转到首页
            Toast('提交成功');
            this.$router.replace('/question/index')
          }
        })
        setTimeout(()=>{Indicator.close()},300)

      },
      begin(){
        console.log(this)
        console.log(parseInt(this.$refs.grade.value))
        console.log(this.$refs.grade.value)
      },
      getSchoolList () {
        if (this.areaCode === null || this.areaCode === '') {
          swal('请选择省市区！')
          return
        }
        if (this.$refs.grade.value === null || this.$refs.grade.value === '') {
          swal('请选择年级！')
          return
        }

        let gradeTag = parseInt(this.$refs.grade.value)
        if(gradeTag){
          console.log('gradeTag', gradeTag)
          if (0 < gradeTag && gradeTag <= 6) {
            gradeTag = 6
          } else if (6 < gradeTag && gradeTag <= 9) {
            gradeTag = 9
          } else if (9 < gradeTag && gradeTag <= 12) {
            gradeTag = 12
          }
        }else {
          gradeTag=null
        }


        let parameter = {
          areaCode: this.areaCode,
          gradeTag: gradeTag,
          school: this.school,
        }
        console.log('parameter', parameter)
        Indicator.open()
        api.post(url.questions.schoolList, parameter).then((res) => {
          Indicator.close()
          if (res.success) {
            this.schoolNameList = res.data
            console.log('this.schoolNameList', this.schoolNameList)
          }
        })
        Indicator.close()
      },
      cityPicker () {
        let _this = this
        $('#showCity').cityPicker({
          title: '请选择地址',
          onClose: function (d) {
            $('#showCity').html(d.displayValue)
            $('#countyInfo').val(d.displayValue)
            _this.areaCode = d.value[2]
            _this.county=d.displayValue.toString()
            //_this.getSchoolList()
          }
        })
      },
      schoolPicker () {
        let _this = this
        console.log('this.schoolNameList', this.schoolNameList)

          $('#showSchool').picker({
            title: '请选择学校',
            cols: [
              {
                textAlign: 'center',
                values: this.schoolNameList,
                //displayValues: this.schoolNameList,

              }
            ],
            onClose: function (d) {
             // $('#showSchool').html(d.displayValue)
              $('#schoolInfo').val(d.value)
            }
          })


      },
      gradePicker () {
        let _this = this
        $('#showGrade').picker({
          title: '请选择年级',
          cols: [
            {
              textAlign: 'center',
              values: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
              displayValues: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级', '高一', '高二', '高三',]
            }
          ],
          onClose: function (d) {
            $('#showGrade').html(d.displayValue)
            $('#gradeInfo').val(d.value)
            //_this.getSchoolList()
          }
        })
      }
    }
  }
</script>

<style scoped>
  select{
    height: 2rem;
    line-height: 2rem;
  }
  .tit{
    font-size: 18px;
    padding: 1.5rem 1rem;
    font-weight: bold;
    line-height: 1.25rem;
  }
  .form{
    width: 89.33%;
    margin: 0 auto;
  }
  .info{
    line-height: 2rem;
    padding: 0 0.75rem 0 0.5rem;
    width: 100%;
    box-sizing: border-box;
    border:1px solid #D8D8D8;
    background-color: #F8F8F8;
    border-radius: 2px;
    font-size: 16px;
    margin-bottom: 1.4rem;
  }
  .submit{
    display: block;
    width: 100%;
    height: 2.2rem;
    line-height: 2.2rem;
    background-color: #FF4587;
    border-radius: 1.1rem;
    font-size: 18px;
    text-align: center;
    color: #fff;
    border:0;
    margin: 0 auto;
    margin-top: 6rem;
  }
  .btn{
    display: block;
    width: 89.33%;
    height: 2.2rem;
    line-height: 2.2rem;
    background-color: #fff;
    box-sizing: border-box;
    border: 1px solid #FF4587;
    border-radius: 1.1rem;
    font-size: 18px;
    text-align: center;
    color: #FF4587;
    margin: 0 auto;
    margin-top: 1rem;
  }
  .tip{
    line-height: 1rem;
    margin-top: -0.75rem;
    color: #FF4587;
    font-size: 12px;
    text-align: center;
  }
  input::-webkit-input-placeholder{
    color:#939393;
  }
  input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#939393;
  }
  input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:#939393;
  }
  input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
    color:#939393;
  }
  .jt{
    background: url(../../../static/questions/img/jt.png) no-repeat right center #F8F8F8;
  }

</style>
